<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" />
    <div class="app-container">
      <div class="containerMain">
        <div class="videoMain">
          <div class="leftVideo">
            <div class="searchitem">
              <div class="itemList" style="margin-bottom: 20px;">
                <div class="item-con">
                  <!-- <el-button
                    style="margin-left: 30px; margin-top: 10px; width: 80px"
                    @click="cancel()"
                    >返回</el-button
                  > -->
                  <i class="el-icon-back" style="color: #409eff;cursor:pointer;font-size:25px" @click="cancel()"></i>
                </div>
                <div class="item-con">
                  <span>会议编号:{{ meetingId }}</span>
                </div>
                <div class="item-con">
                  <span>会议开始时间:{{ customerJoinTime }}</span>
                </div>
                <div class="item-con">
                  <span>会议结束时间:{{ customerLeaveTime }}</span>
                </div>
              </div>
              <div class="itemList">
                <div class="item-con">
                  <span>客户视讯号:{{ customerVideoNum }}</span>
                </div>
                <div class="item-con">
                  <span>参会人标识:{{ agentId }}</span>
                </div>
              </div>
            </div>
            <div style="display: flex; flex-direction: row">
              <div v-show="showVideo" style="display: flex; flex-direction: column;width:70%" ref="block">
                <video
                  id="media"
                  style="width: 100%;margin-left: 10px;"
                  :src="onerecordFile"
                  controls
                  autoplay
                ></video>
              </div>
            </div>
            <div v-show="showVideo" class="videoList">
              <div class="videoTitle">
                <span>视频列表</span>
              </div>
              <div style="width:100%;overflow-x:auto;display: flex;">
                <div
                  style="margin-right: 10px;flex:0 0 30%"
                  v-for="(item, index) in videoList"
                  :key="index"
                  >
                  <video
                    style="width: 100%"
                    :src="item.recordFile"
                    controls="controls"
                  ></video>
                  <div style="text-align: center;margin: 10px 0;cursor:pointer">
                    <el-button size="mini"@click="changeVideo(item.recordFile,index)" type="primary">切换</el-button>
                  </div>
                </div>
              </div>
            </div>
        </div>

        <div v-show="showVideo" class="rightPhoto"><!-- :style="photoClass" -->
          <div class="photoTitle">
            <span>照片</span>
          </div>
          <div style="height: 100%;overflow: auto">
            <div style="display: flex;flex-wrap: wrap;">
              <div style="width:45%;margin:5px" v-for="(item, index) in list" :key="index">
                <div>
                  <img
                    v-if="item.imageUrl"
                    style="width:100%;cursor: pointer"
                    :src="item.imageUrl"
                    @click="changespeed(item.seconds,item)"
                  />
                  <div>{{item.name}} </div>
                </div>
                <div>
                  <img
                    style="width:100%;cursor: pointer"
                    v-if="item.imageBackUrl"
                    :src="item.imageBackUrl"
                    @click="changespeed(item.seconds,item)"
                  />
              </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import { fetchAgentList } from "@/api/systemapi/agent";
import {
  fetchList,
  fetchDetailExport,
  fetchVideoList,
  fetchPhotoList,
} from "@/api/systemapi/video";
import { fetchAll } from "@/api/systemapi/skill";
import { pageParams } from "@/settings";

export default {
  components: {
    Pagination,
    HeaderTitle,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "启用",
        2: "禁用",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      titleList: [{ title: "视频播放" }],
      //视频用到的参数
      meetingId: "",
      type:"",
      videoHeight:'500px',
      customerVideoNum: "",
      agentId: "",
      customerJoinTime: "",
      customerLeaveTime: "",
      recordFile: "",
      sessionId: "",
      list: [],
      photoClass:{width:'30%',height:this.videoHeight+'px',overflow:'auto'},
      skillList: [],
      timeValue: [],
      listLoading: true,
      skillGroupList: [],
      searchform: {
        recordStartTimeLeft: "",
        recordStartTimeRight: "",
        meetingId: "",
        recordFileId: "",
        sessionId: "",
      },
      // 分页
      pagination: pageParams,
      onerecordFile: "",
      showVideo: false,
      videoList: [],
      currentIndex: 0
    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function () {
      //this.searchform.page = this.pagination.currentPage;
      this.fetchData();
    },
    "pagination.pageSize": function () {
      this.searchform.rows = this.pagination.pageSize;
      //this.searchform.page = 1;
      this.fetchData();
    },
    videoHeight(val){
      this.photoClass={width:'30%',height:val+'px',overflow:'auto'}
    }
  },
  mounted() {
    this.meetingId = this.$route.query.meetingId;
    this.type = this.$route.query.type;
    this.customerVideoNum = this.$route.query.aniVideoNum;
    this.agentId = this.$route.query.agentId;
    this.customerJoinTime = this.$route.query.dialTime;
    this.customerLeaveTime = this.$route.query.endTime;
    this.recordFile = this.$route.query.recordFile;
    this.sessionId = this.$route.query.sessionId;
    console.log(this.recordFile, "this.recordFile");
    //调用照片接口
    this.fetchData();
    this.getVideoList();
    console.log(this.$refs.block.offsetHeight,"this.$refs.block.offsetHeight")
    this.$nextTick(() => {
      let self = this;
      this.videoHeight = this.$refs.block.offsetHeight;
      window.onresize = function() {
        self.videoHeight = self.$refs.block.offsetHeight;
      };
    });
  },
  methods: {
    getVideoList() {
      fetchVideoList(
        {meetingId: this.meetingId}
      ).then((response) => {
        if (response.code == 0) {
          this.showVideo = true;
          this.videoList = response.data;
          this.changeVideo(this.videoList[0].recordFile,0)
        }else if (response.code == 0) {
          this.$message({
            type: "error",
            message: '未查询到对应视频',
          });
        } else if (response.code == -9) {
          this.$message({
            type: "warning",
            message: response.msg,
          });
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    changeVideo(recordFile, index) {
      this.onerecordFile = recordFile;
      this.currentIndex = index;
    },
    exportUser() {
      downloadUserInfo({
        exportType: 1,
        ...this.searchform,
      }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    exportDemo() {
      downloadUserInfo({ exportType: 2 }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },
    getOrganList() {
      fetchOrganList().then((res) => {
        this.treeData = res.data;
      });
    },
    // 账号权限下拉
    getAccount() {
      fetchAccount().then((res) => {
        this.accountList = res.rows;
      });
    },
    // 点击树形节点 ，过滤列表坐席
    filterDepart(data) {
      let organId =
        this.searchform.organId.length > 0
          ? this.searchform.organId[this.searchform.organId.length - 1]
          : "";
      fetchAgentList({
        organTreeId: data.id,
        entNum: this.entNum,
        username: this.searchform.username,
        roleId: this.searchform.roleId,
        organId: organId,
        //rows: this.searchform.rows,
        //page: this.searchform.page,
      }).then((response) => {
        if (response.code == 0) {
          this.list = response.data.rows;
          this.pagination.total = response.data.records;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    // 重置搜索，刷新列表
    reset() {
      (this.searchform = {
        recordStartTimeLeft: "",
        recordStartTimeRight: "",
        meetingId: "",
        recordFileId: "",
        sessionId: "",
        //rows: "10",
        //page: "1",
      }),
        (this.timeValue = []);
      this.fetchData();
    },
    getSkillList() {
      fetchAll().then((response) => {
        if (response.code == 0) {
          this.skillList = response.data.list;
        }
      });

    },

    cancel() {
      if(this.type == 'meetingDetail'){
        this.$router.push({
          path: "/system/video/list",
          query: { meetingId: this.meetingId },
        });
      }
      if(this.type == 'videoManager'){
        this.$router.push({
          path: "/system/video/detail"
        });
      }
    },

    changespeed: function (seconds, item) {
      console.log(this.currentIndex)
      if (item.sort != null && item.sort != this.currentIndex) {
        this.$message({
          type: "warning",
          message: `请切换到第${item.sort + 1}段视频`
        })
      } else if (!seconds) {
        this.$message({
          type: "warning",
          message: `本图片非录制视频中截图`
        })
      } else {
        let it = this.videoList[item.sort]
        let moment1 = moment(item.createTime).valueOf()/1000;
        let second = moment1-it.startTime;
        let videoElement = document.getElementById("media");
        videoElement.currentTime = second
        console.log(videoElement.currentTime, "videoElement.currentTime")
      }
    },

    //跳转进详情页
    viewDetail(row) {},

    //播放视频
    playVideo(row) {},

    downloadVideo(row) {
      window.open(row);
    },

    exportDetail() {
      if (this.timeValue != null && this.timeValue.length > 0) {
        this.searchform.recordStartTimeLeft = moment(this.timeValue[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.searchform.recordStartTimeRight = moment(this.timeValue[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      } else {
        //不选时间默认展示今天得
        this.searchform.recordStartTimeLeft = "";
        this.searchform.recordStartTimeRight = "";
      }

      fetchDetailExport({ ...this.searchform }).then((res) => {
        console.log(res);
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },

    fetchData() {
      fetchPhotoList({
        meetingId: this.meetingId,
        sessionId: this.sessionId,
      }).then((response) => {
        if (response.code == 0) {
          this.list = response.data;
          this.pagination.total = response.data.records;
          console.log(response.data.list);
          console.log(this.list, "this.list");
        } else if(response.code == -99) {
          this.$message({
            type: "warning",
            message: response.msg,
          });
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    fetchDetailData(id) {
      fetchDetail({ id: id }).then((response) => {
        if (response.code == 0) {
          this.list = response.data;
          this.pagination.total = response.data.records;
          this.$router.push({ path: "/" });
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    // 删除
    del(data) {
      this.$confirm("是否确定注销?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        fetchDel(data.id).then((response) => {
          if (response.code === 0) {
            this.fetchData();
            this.$message({
              message: "注销成功",
              type: "success",
            });
          } else {
            this.$message({
              message: response.msg,
              type: "error",
            });
          }
        });
      });
    },
    recover(data) {
      fetchRecover({ id: data.id, userType: "3" }).then((response) => {
        if (response.code === 0) {
          this.fetchData();
          this.$message({
            message: "恢复成功",
            type: "success",
          });
        } else {
          this.$message({
            message: response.msg,
            type: "error",
          });
        }
      });
    },
    resetPas(data) {
      this.$confirm("是否确定重置密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchSetPsd({ id: data.id }).then((response) => {
            if (response.code === 0) {
              this.$message({
                message: "重置成功",
                type: "success",
              });
              this.fetchData();
            } else {
              this.$message({
                message: response.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置",
          });
        });
    },
    // 新增
    add(data) {
      this.$router.push({
        path: "/system/agent/detail",
        query: { type: 3 },
      });
    },
    editBtn(data) {
      this.$router.push({
        path: "/system/agent/detail",
        query: { type: "2", id: data.id },
      });
    },
    viewFn(data) {
      this.$router.push({
        path: "/system/agent/detail",
        query: { type: "1", id: data.id },
      });
    },
    handelExport() {
      this.dialogVisible = true;
    },
    // 批量导入文件
    httpRequestExport(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fetchExport(fd).then((res) => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    submitUpload() {
      this.$refs.uploadBatch.submit();
    },
    // resetFileds() {
    //   // 重置校验
    //   if (this.$refs["ruleForm"]) {
    //     this.$refs["ruleForm"].resetFields();
    //   }
    // }
  },
};
</script>
<style lang="scss">
.tree-con {
  .el-tree-node__content {
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss" scoped>
.containerMain {
  width: 100%;
  height: 100%;
  .videoMain {
    display: flex;
    .leftVideo {
      flex: 1;
      .videoList {
        .videoTitle {
          padding: 20px;
          color: #666;
        }
      }
    }
    .rightPhoto {
      flex: 0 0 390px;
      .photoTitle {
        color: #666;
        font-size: 18px;
        padding: 20px 0;
      }
    }
  }
  .searchitem {
    padding: 20px 10px;
  }
  .itemList {
    display: flex;
    .item-con {
      margin-right: 20px;
    }
  }
  .search-item {
    flex: 1;
    padding: 20px 10px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    .item-list {
      display: flex;
      flex-wrap: wrap;
    }
    .item-con {
      display: flex;
      margin-right: 30px;
      margin-top: 20px;
      span {
        display: inline-block;
        line-height: 28px;
        margin-right: 10px;
      }
    }
    .item {
      width: 180px;
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    .div-tree {
      width: 250px;
    }
    .div-table {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .el-table {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
  .item-btn {
    margin-top: 20px;
    flex: 0 0 140px;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
